<template>
    <div class="m_right">
        <div class="mem_tit">资讯列表</div>
        <div style="text-align: center;"> 
            <label>
                <span>资讯标题:</span>
                <el-input
                    style="width:200px;margin:10px;"
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    v-model="queryParam.title">
                </el-input>
                <el-button
                    type="primary"
                    @click="search">
                    搜索
                </el-button>
            </label>
        </div>
        <el-button v-if="userRole==1" size="small" style="margin-left: 10px;" type="primary" @click="toAdd" icon="el-icon-circle-plus">添加</el-button>
        <el-table
            :data="pageInfo.list"
            style="width: 100%"
            >
            <el-table-column
                type="index"
                :index="indexMethod"
                label="序号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="title"
                label="资讯标题"
                :show-overflow-tooltip="true"
                width="180">
            </el-table-column>
            <el-table-column
                prop="content"
                label="资讯内容"
                :show-overflow-tooltip="true"
                width="280">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="资讯创建时间">
            </el-table-column>
            <el-table-column
                label="操作" >
                <template slot-scope="scope" v-if="userRole==1">
                    <el-button @click="toDetail(scope.row.id)" type="text" size="small">详情</el-button>
                    <el-button @click="toEdit(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="delNews(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        style="text-align: center;"
        v-if="pageInfo.pages>0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParam.pageNum"
        :page-sizes="[5,8, 10, 20]"
        :page-size="queryParam.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name:'BackInfo',
    data:function(){
        return{
            pageInfo:{},
            queryParam:{
                pageSize:5,
                pageNum:1,
                title:''
            },
        }
    },
    computed:{
        userRole(){
            return this.$store.state.userRole;
        }
    },
    methods:{
        //查看详情
        toDetail(id){
            this.$router.push({path:'/back-index/news-detail',query:{'id':id}});
        },
        //自定义索引
        indexMethod(index){
            return (this.queryParam.pageNum-1)*this.queryParam.pageSize+index+1
        },
        //修改
        toEdit(row){
            this.$router.push({name:'NewsEdit',params:{id:row.id,title:row.title,content:row.content}});
        },
        //添加
        toAdd(){
            this.$router.push({path:'/back-index/add-news'});
        },
        //搜索
        search(){
            this.queryParam.pageNum = 1;
            this.getAll(this.queryParam.pageNum,this.queryParam.pageSize,this.queryParam.title);
        },
        //删除新闻
        delNews(row){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            this.deleteById(row.id);
        }).catch(() => {
            this.$message.info("已取消删除");
        });
        },
        //当前页发生变化的方法
        handleCurrentChange(num){
            this.queryParam.pageNum = num;
            this.getAll(this.queryParam.pageNum,this.queryParam.pageSize,this.queryParam.title);
        },
        //当前页容量发生变化时的方法
        handleSizeChange(num){
            console.log(num)
            this.queryParam.pageSize = num;
           this.getAll(this.queryParam.pageNum,this.queryParam.pageSize,this.queryParam.title);
        },
        //删除资讯的方法
        deleteById(id){
            console.log(id);
            this.$axios({
                method:'get',
                url:'/easybuy/news/del/'+id,
            }).then(rs=>{
                console.log(rs);
                if(rs.data.code == 200){
                    this.$message.success("删除成功!");
                    this.getAll(this.queryParam.pageNum,this.queryParam.pageSize,this.queryParam.title);
                }else{
                    this.$message.error("删除失败!");
                }
            }).catch(rs=>{
                this.$message.error("服务器错误!");
            })
        },
        //获取所有数据的方法
        getAll(pageNum,pageSize,title){
            this.$axios({
                method:'get',
                url:'/easybuy/news/getlist',
                params:{
                    pageNum,
                    pageSize,
                    title
                },
            }).then(rs=>{
                console.log(pageNum,pageSize)
                console.log(rs);
                this.pageInfo = rs.data.pageInfo;
            })
        }
    },
    mounted(){
        this.getAll(this.queryParam.pageNum,this.queryParam.pageSize,this.queryParam.title);
    }
}
</script>

<style>

</style>